<script lang="ts" setup>
import { ref } from 'vue';
import useStore from '@/store';
import { storeToRefs } from 'pinia';
const { comments } = useStore();
const { list } = storeToRefs(comments);
const props = defineProps<{
	idx: number,
}>();
const path = ref("/src/assets/img/logo.png");
</script>

<template>
	<div class="comment-bar-header">
		<div class="comment-bar-header-left">
			<div class="comment-bar-header-author-profix" :style="{ backgroundImage: 'url(' + path + ')' }"></div>
			<div class="comment-bar-header-author-txt">
				<div>匿名用户</div>
				<div>工号：{{ list[idx].commentStarter_Id }}</div>
			</div>
		</div>
		<span class="comment-bar-header-right">{{ list[idx].commentReceiverTime }}</span>
	</div>
</template>

<style lang="scss" scoped>
@import "@/assets/scss";

.comment-bar-header {
	@include clearfix;
	width: 100%;
	height: 35px;

	.comment-bar-header-left {
		float: left;
		@include clearfix;

		.comment-bar-header-author-txt,
		.comment-bar-header-author-profix {
			float: left;
		}

		.comment-bar-header-author-txt div:first-child {
			margin-bottom: 3px;
			margin-right: 25px;
		}

		.comment-bar-header-author-txt div:nth-child(2) {
			font-size: xx-small;
		}

		.comment-bar-header-author-profix {
			position: relative;
			top: 8px;
			width: 25px;
			height: 25px;
			border-radius: 50%;
			background-size: cover;
			margin-right: 15px;
		}

		.comment-bar-header-author-len {
			line-height: 45px;
			color: #859ec5;
		}
	}


	.comment-bar-header-right {
		float: right;
		color: #d6d6d6;
	}
}
</style>